import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Table, Row, Rows } from 'react-native-table-component';
import { TransparentBtn } from 'bee/components/Buttons';
import Mask from 'bee/components/Mask';
import { px2dp, request } from 'bee/utils';
import { colors, sizes } from 'bee/themes';
import { Title } from 'bee/components/MakePlan';
import Coverges from './Coverges';
import PlanInfo from './PlanInfo';

const RiskTable = ({ info, rowsData }) => {
  console.log(rowsData);
  return (
    <Table borderStyle={styles.tableBorder}>
      <Row
        data={['险种', '保额', '保费', '交费期间']}
        style={styles.tableRow}
        textStyle={styles.tableText}
      />
      <Rows
        data={rowsData}
        style={styles.tableRow}
        textStyle={styles.tableText}
      />
    </Table>
  );
};

const RiskView = ({ info, name }) => {
  const fee = info
    .map(v => Number(v.excess))
    .reduce((prev, curr) => prev + curr, 0);

  const rowsData = info.map(v => [v.name, v.coverage, v.coverage, '10年']);

  return (
    <View style={styles.risksView}>
      <View style={[styles.row, styles.planNameView]}>
        <View style={{}}>
          <Text style={styles.planName}>{name}</Text>
          <Text style={styles.firstYearMoney}>
            首年保费：
            {fee}
          </Text>
        </View>
        <Mask
          contentPosition="bottom"
          ref={mask => {
            this.mask = mask;
          }}
        >
          <View style={{ flexDirection: 'row' }}>
            <TransparentBtn
              bgc={colors[1001]}
              fontColor={colors.white}
              text="修改"
              onPress={() => {
                this.mask.open();
              }}
              containerStyle={{ marginRight: px2dp(18) }}
            />
            <TransparentBtn
              fontColor={colors[1001]}
              bgc={colors.white}
              borderColor={colors[1001]}
              text="删除"
              onPress={() => {}}
            />
          </View>

          <PlanInfo close={() => this.mask.close()} risks={info} />
        </Mask>
      </View>
      <RiskTable rowsData={rowsData} />
    </View>
  );
};

export default class Risks extends Component {
  constructor() {
    super();

    this.state = {
      plans: [],
      risks: [],
    };

    this.renderTables = this.renderTables.bind(this);
  }

  async componentDidMount() {
    await request('/plans').then(data => {
      this.setState({ plans: data.plans });
    });

    await request('/planinfo')
      .then(data => {
        const { body } = data;
        this.setState({
          name: body.name,
          risks: body.plans,
        });
      })
      .catch(e => {
        console.error(e);
      });
  }

  renderTables() {
    return this.state.plans.map(v => <RiskTable key={v.id} />);
  }

  render() {
    return (
      <View style={styles.section}>
        <Title title="险种" />

        <RiskView info={this.state.risks} name={this.state.name} />

        <View style={[styles.row, styles.addPlanView]}>
          <Mask
            contentPosition="bottom"
            ref={list => {
              this.list = list;
            }}
          >
            <Text style={styles.addPlan}> + 添加主险/附加险</Text>
            <Coverges
              data={this.state.plans}
              selectIndex={this.state.selectIndex}
              selectPlan={index => {
                this.setState({ selectIndex: index }, () => {
                  this.list.close();
                  this.mask.open();
                });
              }}
              close={() => this.list.close()}
            />
          </Mask>
        </View>
      </View>
    );
  }
}
const { f2 } = sizes;

const styles = StyleSheet.create({
  section: {
    backgroundColor: colors.white,
    marginBottom: px2dp(20),
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  planNameView: {
    justifyContent: 'space-between',
    marginBottom: px2dp(20),
  },
  planName: {
    fontSize: f2,
    color: colors[1102],
    height: px2dp(50),
    textAlignVertical: 'center',
  },
  firstYearMoney: {
    fontSize: f2,
    color: colors[1102],
    height: px2dp(50),
    textAlignVertical: 'center',
  },
  addPlanView: {
    marginRight: px2dp(40),
    justifyContent: 'flex-end',
    height: px2dp(120),
  },
  addPlan: {
    color: colors[1001],
    fontSize: px2dp(24),
    height: px2dp(42),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors[1001],
    borderRadius: px2dp(6),
    paddingLeft: px2dp(14),
    paddingRight: px2dp(14),
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  // 表格
  tableRow: {
    height: px2dp(80),
    justifyContent: 'center',
  },
  tableText: {
    textAlign: 'center',
  },
  tableBorder: {
    borderColor: colors[1104],
    borderWidth: StyleSheet.hairLineWidth,
  },
  risksView: {
    marginLeft: px2dp(40),
    marginRight: px2dp(40),
  },
});
